<template>
    <div class="checkInput">
        <el-select v-model="value" style="margin-bottom: 10px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <component :is="currentComponent" @setFormData='setFormData' :label='label'></component>
    </div>
</template>

<script>
    import optionInput from './optionInput.vue'
    import datePicker from './datePicker.vue'
    export default {
        data() {
            return {
                value: 1,
                obj:{},
                options: [{
                    value: 1,
                    label: '选择范围'
                }, {
                    value: 2,
                    label: '动态筛选'
                }],
            }
        },
        props:{
            label:{
                type:Object,
                default:()=>{}
            }
        },
        components: {
            optionInput,
            datePicker,
        },
        methods:{
            setFormData(val) {
                this.$emit('setFormData',val)
            }
        },
        computed: {
            currentComponent: function () {
                return this.value == 1 ? datePicker : optionInput
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .el-select {
        width: 100%;
    }

    /deep/ .el-date-editor.el-input {
        width: 100%;
    }

    /deep/ .el-range-editor.el-input__inner {
        width: 100%;
    }

    /deep/ .el-range-editor .el-range-input {
        flex: 3;
    }

    /deep/ .el-date-editor .el-range-separator {
        flex: 1;
    }
</style>